<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    max-height="1000">
    <el-table-column
      fixed
      prop="id"
      label="茶叶编号"
      width="350">
    </el-table-column>
    <el-table-column
      prop="name"
      label="茶叶名称"
      width="350">
    </el-table-column>
    <el-table-column
      prop="price"
      label="茶叶价格（元）"
      width="350">
    </el-table-column>
    <el-table-column
      prop="discount"
      label="茶叶折扣"
      width="350">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="230">
      <template slot="header">
        <el-button type="danger" round @click="jumpToAdd">添加新茶叶商品</el-button>
      </template>
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="ideditRow(scope.row)"
          type="primary"
          size="small">
          编辑
        </el-button>
        <el-button
          @click.native.prevent="deleteRow(scope.row)"
          type="primary"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {listTea,delTea} from'@/api'
  export default {
    methods: {
        jumpToAdd(){
            this.$router.push('/teaedit')
        },
        deleteRow(rows) {
            let _this = this;
            this.$confirm('是否确认要删除茶叶：'+rows.name+'?', '删除数据', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                    delTea(rows.id).then((res) => {
                    if (res) {
                        _this.$alert(rows.name + "删除成功",'删除数据',{
                        confirmButtonText: '确定',
                        callback: action => {
                            location.reload()
                        }
                        });
                    }
                    })
                }
                ).catch(() => {
            });
        },
        ideditRow(rows){
            this.$router.push('/teaidedit?id=' + rows.id)
        }
    },
    created() {
        let _this = this
        listTea().then((res) => {
            //console.log(res)
            _this.tableData = res.data
        })
    },
    data() {
      return {
        tableData: [],
        total: 0,
      }
    }
  }
</script>